<template>
  <el-row class="home" :gutter="20">
    <el-col :span="8">
      <el-card shadow="hover">
        <div class="user">
          <img src="../../assets/user.jpg" alt="" />
          <div class="user-info">
            <p class="name">Admin</p>
            <p class="role">管理员</p>
          </div>
        </div>
        <div class="login-info">
          <p>登录时间：<span>2024-11-18</span></p>
          <p>登录地点：<span>广州</span></p>
        </div>
      </el-card>
      <el-card shadow="hover" height="450px">
        <el-table :data="tableData">
          <el-table-column
            :prop="key"
            :label="val"
            :key="key"
            v-for="(val, key) in tableLabel"
          />
        </el-table>
      </el-card>

      
    </el-col >
    <el-col :span="16">
      <div ref="chartContainer" class="chart-container"></div>
    </el-col>
  </el-row>
</template>

<script setup>
import { ref, onMounted, onUnmounted,getCurrentInstance } from "vue";
import axios from "axios";
import * as echarts from "echarts";

const {proxy} =getCurrentInstance()

const chartContainer = ref(null);

// 初始化图标
const initChart = () => {
  if (chartContainer.value) {
    const myChart = echarts.init(chartContainer.value);

    const option = {
      title: {
        text: "ECharts 入门示例",
      },
      tooltip: {},
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    };

    myChart.setOption(option)
    // 删除图标
    onUnmounted(()=>{
      myChart.dispose()
    })
  }
};



const tableLabel = {
  name: "商品",
  todayBuy: "今日购买",
  monthBuy: "本月购买",
  totalBuy: "总购买",
};
let tableData = ref([]);

const getTableList = async () => {
  // await axios.get("/home/getTableData").then((res) => {
  //   if (res.data.code == 200) {
  //     tableData.value = res.data.data.tableData;
  //   }
  // });

  let res= await proxy.$api.getTableData()
  console.log(res);
  tableData.value = res.tableData;

};
onMounted(() => {
  getTableList();

  initChart()
});
</script>

<style lang="less">
.home {
  .user {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
    img {
      width: 150px;
      height: 150px;
      border-radius: 50%;
    }
  }
}

.chart-container{
  width: 600px;
  height: 400px;
}

</style>